PBR 物理渲染 (Physically Based Rendering)

PRB是一種渲染方法，也是一套現代 3D 應用的標準。PBR 模擬光線在真實世界中與不同材質互動的方式來模擬現實生活中的光照。

它的原理是依照能量守恆定律來進用物理定律和數學公式，來運算照射到物體上的光線能量，一部分會被反射，一部分會被吸收，讓物體的光影表現更加可信。

IBL 圖像照明技術 ( Image-Based Lighting)

提到PBR就一定會講到IBL，他們是密不可分的技術，特別是在WebXR中是實現環境真實感的關鍵。
傳統的3D 渲染，是透過在場景中放置少數幾個單一光源（例如一個太陽光、一個點光源）來照明。IBL 的做法則完全不同，他是使用一張特殊的 360 度環境圖像（通常是 HDR 貼圖） 來模擬整個世界的照明。這張圖像中包含了所有方向、所有顏色的光照資訊，就可以去計算場景中所有物體接收到的間接光和精確反射，讓物體的光影合理的在XR的世界中。

Babylon.js 就可以直接用的PBR Material

上面那兩個理論聽起來很麻煩欸，還好BJS 的核心就包含了 PBRMaterial，不需要額外載入擴充套件或額外的 Material 庫，就可以直接拿來用。它整合了了上述的PBR理論實作了包含現代基於物理的渲染所需的所有功能，讓開發者可以用這個就實現PBR 渲染的數據結構。

Babylon團隊提供了兩種快速上手的預設簡化版本：

• 金屬粗糙度 Metallic roughness convention (目前主流流行的作法)
• 鏡面光澤度 Specular glossiness convention(傳統作法)

金屬粗糙度 PBRMetallicRoughnessMaterial

5個主要的變數：

1. baseColor / baseTexture ：根據金屬度值，基底色有兩種不同的解釋。
   • 金屬： baseColor 決定了金屬反光的顏色。
   • 非金屬： baseColor 決定了物體本身的顏色。
2. metallic ：金屬度。通常是0到1之間。0 表示非金屬材質，1 表示金屬材質。
3. roughness ：粗糙度。通常是0到1之間。0 表示非常光滑，1 表示非常粗糙。
4. metallicRoughnessTextures ：是一種將金屬度、粗糙度（甚至環境光遮蔽）同時打包到同一張紋理中的技術。可以提高渲染效能，同時允許更精細的材質變化，從而改善 PBR 渲染的質量。
5. environmentTexture ：環境紋理

首先我們可以先試試一顆完全沒有金屬成份，粗糙到不行的球：

const pbr = new BABYLON.PBRMetallicRoughnessMaterial("pbr", scene);
sphere.material = pbr;
pbr.baseColor = new BABYLON.Color3(1.0, 0.766, 0.336);
pbr.metallic = 0; // 金屬度0代表完全不是金屬
pbr.roughness = 1.0; // 粗糙度1代表最粗糙

接著來試試一個完全相反，完全金屬又光滑到不行的球讓他可以反射周遭環境，同時給他一個環境紋理讓他反射：

const pbr = new BABYLON.PBRMetallicRoughnessMaterial("pbr", scene);
pbr.baseColor = new BABYLON.Color3(1.0, 0.766, 0.336);
pbr.metallic = 1.0;
pbr.roughness = 0;
pbr.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("/textures/environment.dds", scene);

鏡面光澤度 PBRSpecularGlossinessMaterial

5個主要的變數：

• diffuseColor / diffuseTexture ：漫反射顏色。
• specularColor：鏡面反射顏色。這表示材質的反射程度（無鏡面）。
• glossiness：光澤度。這表示“反射的清晰度”。
• specularGlossinessTexture：指定鏡面顏色 RGB 和每種素材的光澤度 A。
• environmentTexture ：環境紋理

其實方法類似，一樣做一個反光的金屬球，寫法就會是這樣：

const pbr = new BABYLON.PBRSpecularGlossinessMaterial("pbr", scene);
pbr.diffuseColor = new BABYLON.Color3(1.0, 0.766, 0.336);
pbr.specularColor = new BABYLON.Color3(1.0, 1.0, 1.0);
pbr.glossiness = 1.0;
pbr.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("/textures/environment.dds", scene);

由範例可以發現babylon.js讓我們要用PBR變得簡單很多，並同時因為在開發XR的時候，大多會引入外部模型，所以更多時候我們都是在把IBL 的環境設定好，讓模型的PBR能得到正確的渲染，來好好地融入到XR的環境，讓一切都是那麼自然的放在那裏增加沉浸感。